<template>
  <div :style="{
    paddingBottom: tempData.paddingBottom + 'px',
    paddingLeft: tempData.paddingTwice + 'px',
    paddingRight: tempData.paddingTwice + 'px',
    paddingTop: tempData.paddingTop + 'px',
    boxSizing: 'border-box',
  }">
    <div :style="{
      width: '100%',
      height: '100%',
      background: '#ffffff',
      padding: '10px',
      borderTopLeftRadius: tempData.radiusNumTop + 'px',
      borderTopRightRadius: tempData.radiusNumTop + 'px',
      borderBottomLeftRadius: tempData.radiusNumBottom + 'px',
      borderBottomRightRadius: tempData.radiusNumBottom + 'px',
    }">
      <div v-html="compObj.context"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  // 选中的当前组件参数
  compObj: {
    type: Object,
    default: () => {
      return {}
    },
  },
})
console.log(props)
const tempData: any = ref({})
watch(
  () => props.compObj,
  (newVal, oldVal) => {
    tempData.value = JSON.parse(JSON.stringify(newVal))
  },
  { immediate: true, deep: true }
)
</script>

<style scoped></style>
